/*
* 组件模块：热门景区/热门线路
* 数据：接收props
* @params: {
    product: 产品类型
    list: 数据<Array>
    target: 页面跳转
}
*/
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/CommonComponent.module.scss';
// api
import { hotProductList_SSR } from '@/ssr';

const HotProductPart = ({ product, target }) => {

    const [list, setList] = useState([]);

    useEffect(async () => {
        const res = await hotProductList_SSR(target)
        if (res && res.ssr) {
            setList([...res.ssr])
        }
    }, []);

    if (!list.length) {
        return <></>
    }
    return (
        <div className={styles['hot-pro-list']}>
            <h2>{product}</h2>
            {
                list.map((data,index) => {
                    const { goodsName } = data;
                    return (
                        <div className={styles['item']} title={`${goodsName} - ${data.description}`} key={index}>
                            <Link href={`${target}/${data.id}.html`}>
                                <a target="_blank">
                                    <img src={replaceImageUrl(data.thumbnail)} alt={goodsName} />
                                    <h3>{`${goodsName}`}</h3>
                                </a>
                            </Link>
                            <p className={styles['price']}>
                                ￥<em>{data.showPrice}</em><span>起</span>
                            </p>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default HotProductPart